<template>
	<div class="login-page" ref="loginPage">
		<div class="header">
			<div class="left">
				<p class="title">Sailheader Data Visual Platform</p>
				<p class="subTitle">赛瀚德数据可视化平台1.1.0 (Alpha)</p>
			</div>
			<div class="login">
				<el-button v-if="!token" round type="primary" icon="el-icon-user" @click="handleLogin">登录</el-button>
				<div v-else class="login-userInfo">
					<el-avatar size="large" :src="avatar"></el-avatar>
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							{{ userName }}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item divided command="list"> 看板管理 </el-dropdown-item>
							<el-dropdown-item command="logout"> 退出登录 </el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</div>
		<div class="banner">
			<el-carousel :interval="4000" type="card" height="500px">
				<el-carousel-item v-for="item in carouselImgs" :key="item">
					<img :src="item.url" alt="" class="carousel-img" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 产品功能 -->
		<div class="product-features">
			<div class="title">产品功能</div>
			<div class="content">
				<div class="card-wrap">
					<div class="card">
						<div class="card-left-wrap">
							<div class="card-left">
								<div class="left-title">内置多种组件 开箱即用</div>
								<div class="left-content">
									<div class="content-text">
										<div class="img-wrap">
											<i class="el-icon-star-off content-img"></i>
										</div>
										<span>内置多种实用美观的可视化组件库及MES模板库，配合强大的开放能力，让用户即使没有可视化开发能力，也能搭建专业的酷炫大屏</span>
									</div>

									<div class="content-text">
										<div class="img-wrap">
											<i class="el-icon-star-off content-img"></i>
										</div>
										<span>行业模板涵盖：车间，品质，SMT设备状态监控，生产状态监控等，为用户提供设计参考</span>
									</div>
								</div>
							</div>
						</div>
						<div class="card-right">
							<img class="t-compare-img" src="/img/login/model1.png" />
						</div>
					</div>
				</div>

				<div class="card-wrap">
					<div class="card">
						<div class="card-left-wrap">
							<div class="card-left">
								<div class="left-title">专业的大屏编辑器 降低大屏配置门槛</div>
								<div class="left-content">
									<div class="content-text">
										<div class="img-wrap">
											<i class="el-icon-star-off content-img"></i>
										</div>
										<span>提供多种非图表组件，所见即所得式的配置方式，只需要通过拖拉拽即可创造出专业的可视化应用</span>
									</div>
								</div>
							</div>
						</div>
						<div class="card-right">
							<img class="t-compare-img" src="/img/login/model2.png" />
						</div>
					</div>
				</div>

				<div class="card-wrap">
					<div class="card">
						<div class="card-left-wrap">
							<div class="card-left">
								<div class="left-title">强大的数据配置和处理能力</div>
								<div class="left-content">
									<div class="content-text">
										<div class="img-wrap">
											<i class="el-icon-star-off content-img"></i>
										</div>
										<span>强大的数据配置能力，提供多种添加数据源的方式，包括静态数据，API接口，SQL数据，WebSocket</span>
									</div>

									<div class="content-text">
										<div class="img-wrap">
											<i class="el-icon-star-off content-img"></i>
										</div>
										<span>支持对接入的数据源进行多次过滤处理等功能</span>
									</div>
								</div>
							</div>
						</div>
						<div class="card-right">
							<img class="t-compare-img" src="/img/login/model3.png" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 产品优势 -->
		<div class="product-advantage-wrap">
			<div class="product-advantage-title">产品优势</div>

			<div class="product-advantage-subtitle">满足用户业务监控、风险预警、数据分析等多种业务的大屏展示需求</div>

			<div class="product-advantage-background">
				<div class="product-advantage">
					<div class="product-advantage-item" v-for="(item, index) in carouselImgs" :key="index" @click="handleCarousel(item)">
						<div class="item-img">
							<img class="img" :src="item.url" />
						</div>
						<div class="item-text">{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="arrowTop" @click="handleTop" v-if="isArrowTop">
			<i class="el-icon-arrow-up"></i>
		</div>
		<el-backtop target=".login-page"></el-backtop>
		<el-dialog title="登录" :visible.sync="dialogFormVisible" width="600px" center>
			<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
				<el-form-item label="租户" prop="tenantId">
					<el-input v-model="form.tenantId" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="账号" prop="username">
					<el-input v-model="form.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleReset('ruleForm')">重 置</el-button>
				<el-button type="primary" @click="handleSubmit('ruleForm')">登 录</el-button>
			</div>
		</el-dialog>
		<!-- <div class="container">
            <div class="ikon">
                <img src="/img/login/login-logo.png" alt="" class="logo" />
                <p class="title">不会代码 也能打造酷炫大屏。</p>
                <p class="title">数据可视化平台，提供快速开发大屏能力</p>
                <img src="/img/login/login-main.png" alt="" class="main" />
            </div>
            <div class="loginBox">loginBox</div>
        </div> -->
	</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
	name: 'home',
	components: {},
	data() {
		return {
			rules: {
				tenantId: [
					{
						required: true,
						message: '请输入租户',
						trigger: 'blur'
					}
					// {
					//     min: 3,
					//     max: 5,
					//     message: "长度在 3 到 5 个字符",
					//     trigger: "blur"
					// }
				],
				username: [
					{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				]
			},
			form: {
				tenantId: '',
				username: '',
				password: ''
			},
			dialogFormVisible: false,
			isArrowTop: false,
			activeName: 0,
			carouselImgs: [
				{
					name: '车间大屏',
					link: '1581927678745292802',
					url: '/img/login/carousel/chejian.png'
				},
				{
					name: '品质大屏',
					link: '1583728491973095426',
					url: '/img/login/carousel/pingzhi.png'
				},
				{
					name: '生产状态监控大屏',
					link: '1538061013031124994',
					url: '/img/login/carousel/scztjk.png'
				},
				{
					name: 'SMT设备状态监控大屏',
					link: '1532298576512221185',
					url: '/img/login/carousel/smt.png'
				},
				{
					name: '产线大屏',
					link: '1629014705620725762',
					url: '/img/login/carousel/chanxian.png'
				},
				{
					name: '总裁大屏',
					link: '1673953049968742401',
					url: '/img/login/carousel/zongcai.jpg'
				}
			]
		};
	},
	computed: {
		...mapState(['token', 'tenantId', 'siteId']),
		...mapGetters(['avatar', 'userName', 'userId'])
	},
	mounted() {
		this.$refs.loginPage.addEventListener('scroll', function (e) {
			let scrollHeight = e.target.scrollTop;
			if (scrollHeight > 1000) {
				this.isArrowTop = true;
			} else {
				this.isArrowTop = false;
			}
		});
	},
	methods: {
		handleCommand(command) {
			if (command == 'logout') {
				this.$store.dispatch('LogOut').then(() => {
					this.$router.push({ path: '/' });
				});
			}
			if (command == 'list') {
				this.$router.push({ path: '/' });
			}
		},
		handleCarousel(item) {
			if (!this.token) {
				this.handleLogin();
				return false;
			} else {
				let previewPath = `/view/${item.link}?tenantId=${this.tenantId}&userId=${this.userId}&siteId=${this.siteId}&token=${this.token}`;
				window.open(previewPath);
				// this.$router.push({
				//     path: `/view/${item.link}`,
				//     query: {
				//         tenantId: this.tenantId,
				//         userId: this.userId,
				//         siteId: this.siteId,
				//         token: this.token
				//     }
				// });
			}
		},
		handleLogin() {
			this.dialogFormVisible = true;
		},
		handleSubmit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$store
						.dispatch('LoginByUsername', this.form)
						.then(() => {
							this.$message.success('登录成功');
							this.dialogFormVisible = false;
						})
						.catch(err => {
							console.log(err);
						});
				} else {
					return false;
				}
			});
		},
		handleReset(formName) {
			this.$refs[formName].resetFields();
		},
		handleTop() {
			this.$refs.loginPage.scrollTo(0, 0);
			window.scrollTo({
				top: 0,
				behavior: 'smooth'
			});
		}
	}
};
</script>
<style lang="scss">
.login-page {
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
	background-image: url('/img/login/loginBg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	.header {
		width: 98%;
		height: 100px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left {
			.title {
				font-style: oblique;
				font-size: 48px;
				color: rgb(0, 186, 255);
				font-weight: bold;
			}
			.subTitle {
				font-style: oblique;
				font-size: 18px;
				color: #2b739d;
			}
		}
		.login {
			&-userInfo {
				display: flex;
				align-items: center;
				.el-avatar {
					margin-right: 10px;
				}
			}
		}
	}
	.banner {
		margin-top: 100px;
		.carousel-img {
			width: 100%;
			height: 100%;
			object-fit: fill;
		}
	}

	.container {
		margin: 100px auto;
		height: 500px;
		width: 1000px;
		min-width: 1000px;
		overflow: auto;
		display: flex;
		.ikon {
			width: 500px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			.logo {
				width: 180px;
			}

			.title {
				font-size: 18px;
				color: #9cb4c2;
			}
			.main {
				width: 280px;
				margin-top: 45px;
			}
		}
		.loginBox {
			width: 500px;
		}
	}

	.product-features {
		width: 100%;
		margin: 120px auto 0;
		.title {
			font-size: 36px;
			font-weight: 400;
			color: #181a39;
			line-height: 46px;
			text-align: center;
		}
		.content {
			display: flex;
			justify-content: center;
			flex-direction: column;
			margin: 0 auto 80px;
			width: 100%;
			.card-wrap {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(rgba(236, 239, 244, 0.3), rgb(255, 255, 255));
				margin: 2% auto 0;
				.card {
					width: 80%;
					padding: 30px 0;
					border-radius: 10px;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.card-left-wrap {
						width: 45%;
						.left-title {
							font-size: 20px;
							font-weight: 500;
							color: #181a39;
							line-height: 26px;
							margin: 4% 0 5% 4%;
						}
						.left-content {
							background: #fff;
							box-shadow: 8px -6px 30px 0px rgb(45 104 248 / 5%);
							border-radius: 10px;
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							padding: 5% 5% 5% 1%;
							.content-text {
								font-size: 16px;
								font-weight: 400;
								color: #6b707a;
								line-height: 34px;
								display: flex;
								.img-wrap {
									.content-img {
										margin: 0 15px 0 10px;
									}
								}
							}
						}
					}
					.card-right {
						border: 10px solid #fff;
						border-radius: 10px;
						cursor: pointer;
						.t-compare-img {
							width: 500px;
							height: 300px;
						}
					}
				}
			}
		}
	}

	.product-advantage-wrap {
		margin: 80px auto;
		width: 100%;
		.product-advantage-title {
			font-size: 36px;
			font-weight: 400;
			color: #181a39;
			line-height: 46px;
			text-align: center;
		}
		.product-advantage-subtitle {
			font-size: 16px;
			font-weight: 400;
			color: #6b707a;
			line-height: 26px;
			text-align: center;
			margin-bottom: 80px;
			margin-top: 30px;
		}
		.product-advantage-background {
			background: linear-gradient(rgba(236, 239, 244, 0.3), #eceff4);
			width: 100%;
			.product-advantage {
				display: flex;
				justify-content: space-between;
				width: 80%;
				flex-wrap: wrap;
				margin: 0 auto;
				.product-advantage-item {
					width: 48%;
					margin: 0 0 3%;
					.item-img {
						height: 300px;
						border: 10px solid #fff;
						border-radius: 10px;
						cursor: pointer;
						.img {
							width: 100%;
							height: 100%;
						}
					}
					.item-text {
						font-size: 20px;
						font-weight: 500;
						color: #181a39;
						line-height: 26px;
						text-align: center;
						margin-top: 3%;
					}
				}
			}
		}
	}
	.arrowTop {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #fff;
		position: fixed;
		right: 50px;
		bottom: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		.el-icon-arrow-up {
			font-size: 22px;
			font-weight: bold;
		}
	}
}
</style>
